<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>首页</title>
		<link href="../../css/mui.css" rel="stylesheet" type="text/css" />
		<link href="../../css/app.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			
		</style>
	</head>

	<body>
		<div class="mui-content" id='content'>
			<div class="mui-slider">
			  <div class="mui-slider-group mui-slider-loop">
			    <!--支持循环，需要重复图片节点-->
				<div v-if="(banners.length>0)" class="mui-slider-item mui-slider-item-duplicate" :data-url='banners[banners.length-1].URL'>
					<a href="#">
						<img :src="banners[banners.length-1].ImgPath">
					</a>
				</div>
				<div v-for='banner in banners' class="mui-slider-item" :data-url='banner.URL'>
					<a href="#">
						<img :src="banner.ImgPath">
					</a>
				</div>
			    <!--支持循环，需要重复图片节点-->
				<div v-if="(banners.length>0)" class="mui-slider-item mui-slider-item-duplicate" :data-url='banners[0].URL'>
					<a href="#">
						<img :src="banners[0].ImgPath">
					</a>
				</div>
			  </div>
			<div class="mui-slider-indicator">
				<div v-for='(banner, index) in banners' :class="`mui-indicator ${index===0?'mui-active':''}`"></div>
			</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			var vm = new Vue({
				el:'#content',
				data:{
					banners:[
						{
							ImgPath:'http://www.dcloud.io/hellomui/images/shuijiao.jpg',
							URL:'',
						},
						{
							ImgPath:'http://www.dcloud.io/hellomui/images/muwu.jpg',
							URL:'',
						},
						{
							ImgPath:'http://www.dcloud.io/hellomui/images/cbd.jpg',
							URL:'',
						}
					],
				},
                mounted: function(){
                    this.$nextTick(function(){
                        mui.init();
                        var gallery = mui('.mui-slider');
						gallery.slider({
						  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
						});
                    });
                },
			});
		</script>
	</body>

</html>